import React, { Component } from 'react';
import Link from 'umi/link';
import router from 'umi/router';
import { connect } from 'dva';
import withRouter from 'umi/withRouter';
import { Icon, Menu, Tooltip } from 'antd';
import { findFirstNode } from '@/utils/funcUtils';

import styles from './index.less';
import memoryUtils from '@/utils/memoryUtils';

const { SubMenu } = Menu;

class BasicHeader extends Component {

  constructor(props) {
    super(props)
    this.selected = false;
  }

  buildSubNavMenus = (subSystems, $handle)=>{
    let navMenus = [];
    if(subSystems) {
      navMenus = subSystems.map((subSystem) => {
        if(subSystem.children) {
          return (
            <Menu.ItemGroup title={<span className='title' title={subSystem.title}>{subSystem.title}</span> }>
              {this.buildSubNavMenus(subSystem.children, $handle)}
            </Menu.ItemGroup>
          );
        } else {
          const initSubModule = findFirstNode(subSystem.modules);
          let path = '/';
          if(subSystem.subSystemType === 'URL') {
            path = '/subSystemi/' + subSystem.$handle;
          } else if(initSubModule) {
            path = '/subSystemm/' + subSystem.$handle + '/' + initSubModule.$handle;
          }
          if(subSystem.$handle === $handle) {
            this.selected = true;
          }
          return  <Menu.Item key={subSystem.$handle}>
            <Link to={path} className='title' title={subSystem.title}>{ subSystem.title }</Link>
          </Menu.Item>;
        }
      });
    }
    return navMenus;
  }

  buildNavMenus = (subSystems, $handle)=>{
    let navMenus = [];
    if(subSystems) {
      navMenus = subSystems.map((subSystem, index) => {
        if(subSystem.children) {
          const subNavMenus = this.buildSubNavMenus(subSystem.children, $handle);
          return (
            <SubMenu title={<span className='title' title={subSystem.title}>{subSystem.title}</span>} style={(index<subSystems.length-1)?{borderRight: '1px solid #cccccc'}:{}}>
              {subNavMenus}
            </SubMenu>
          );
        } else {
          const initSubModule = findFirstNode(subSystem.modules);
          let path = '/';
          if(subSystem.subSystemType === 'URL') {
            path = '/subSystemi/' + subSystem.$handle;
          } else if(initSubModule) {
            path = '/subSystemm/' + subSystem.$handle + '/' + initSubModule.$handle;
          }
          return (
            <Menu.Item key={subSystem.$handle} style={(index<subSystems.length-1)?{borderRight: '1px solid #cccccc'}:{}}>
              <Link to={path} className='title' title={subSystem.title}>{ subSystem.title }</Link>
            </Menu.Item>
          );
        }
      });
    }
    return <Menu selectedKeys={[$handle]} mode="horizontal" theme="dark" style={{background: 'transparent', margin:'20px 0', height:'24px', lineHeight: '24px'}}>{ navMenus }</Menu>;
  }

  render() {
    const { subSystems, location, title } = this.props;
    const url = location.pathname.split('/');
    const $handle = url[2];
    return (
      <div className={styles.header}>
        <div className={styles.logo} onClick={()=>router.replace('/')}>
          <img src={'/file/html/static/logo.png'}/>&nbsp;<span title={title}>{title}</span>
        </div>
        <div className={styles.menusWrap}>
          {this.buildNavMenus(subSystems, $handle)}
        </div>
        <div className={styles.info}>
          {memoryUtils.user.username}&nbsp;
          <Tooltip placement="bottom" title={'退出'}>
            <Icon type="poweroff" style={{cursor: 'pointer'}} onClick={()=>{window.open('/logout', '_self');}}/>
          </Tooltip>
        </div>
      </div>
    );
  }
}

export default connect(({ hnxWebService }) => ({
  ...hnxWebService,
}))(withRouter(BasicHeader));
